<template>
    <div>
        <!-- 注册页面 -->
        <div class="content">
            <img src="../../assets/img_login/下载.jpg" style="width: 100%;"  alt="">
            <div class="lg">
                <h3>用户注册</h3>
                <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                    <el-form-item label="手机号:" prop="shoujihao">
                        <el-input v-model="form.shoujihao"  placeholder="请输入手机号" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="密码:" prop="pwd">
                        <el-input placeholder="请输入密码" v-model="form.pwd" show-password></el-input>

                    </el-form-item>
                    <el-form-item label="确认密码:" prop="pwd1">
                        <el-input placeholder="请输入密码" v-model="form.pwd1" show-password></el-input>

                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn" type="primary" @click="submit">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- <Foot></Foot> -->
    </div>
</template>

<script>
import httpApi from '@/myaxios'
//import Foot from '@/components/Foot.vue';
export default {

    data() {
         return {
             changePwdDialog:false,//修改密码弹框
            form:{
                shoujihao: '',
                pwd: '',
                pwd1:''
            },
            rules:{
                shoujihao:[
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    {pattern:/^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
                ],
                pwd:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    {
                        pattern: /^\w{6,15}$/,
                        message: "6~15位字符，可以包含：数字、字母、下划线",
                        trigger: "blur"
                    },
                ],
                pwd1:[
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                    {
                        pattern: /^\w{6,15}$/,
                        message: "6~15位字符，可以包含：数字、字母、下划线",
                        trigger: "blur"
                    }
                ]
            }
        }
    },
    
// 验证两次密码一样和把注册数据存入数据库
    methods:{
        submit(){
            this.$refs['form'].validate((valid)=>{
                if(valid){
                    if(this.form.pwd==this.form.pwd1){
                    httpApi.logonApi.addUser(this.form).then(res=>{
                        console.log(res);
                        if(res.status==201){
                            this.$message.success('恭喜您,注册成功!!')
                            this.$router.push("/login")
                        }
                    })     
                    }else{
                     this.$message.error('两次输入密码不一致,请重新输入')
                    }
 
                }else{
                     this.$message.error('手机号或密码格式不正确')
                }
            })
        }
    },
    mounted(){

    }
    

}

</script>

<style lang="scss" scoped>
.content {
    position: relative;
}

.lg {
    width: 370px;
    height: 350px;
    border-radius: 10%;
    position: absolute;
    top: 20%;
    left: 45%;
    background-color: rgba(255,255,255,0.1);
    box-shadow: 5px 5px 0 0 rgba(0,0,0,0.2);
    color: white;
    // padding-top: 40px;
    padding-right: 50px;

    >h3 {
        margin-top: 40px;
        margin-left: 40px;
    }
}

.btn {
    margin-right: 100px;
    width: 200px;

}
</style>